<template>

</template>

<script setup lang="ts">
    import {reactive,readonly,watchEffect,shallowReadonly,isReadonly} from "vue"
    const original = reactive({count:0})
    const copy = readonly(original)
    watchEffect(() => {
        console.log(copy.count)
    })
    // 更改源属性会触发其依赖的侦听器
    original.count++

    // 更改该只读副本将会失败，并会得到一个警告
    // copy.count++

    const state = shallowReadonly({
        foo:1,
        nested:{
            bar:20
        }
    })

    // 更改自身状态的属性会失败
    // state.foo++

    // 更改下层嵌套对象
    isReadonly(state.nested) // false
    state.nested.bar++
    console.log(isReadonly(state.nested), state.nested)
</script>

<style scoped lang="less">

</style>
